<template>
    <div>
        <userNav></userNav>
        <div  class="banner">
  <swiperDemo></swiperDemo>
</div>
        
  
    <div  class="content">
      <router-link  v-for="item in searchs"   :to="{path:'/video',query:{title:item.title,context:item.context,id:item.id,imgSrc:item.imgSrc,videoSrc:item.videoSrc}}"  :key="item.id" class="box">
            <!-- <myContent :title="item.title" :context="item.context"></myContent> -->
            <foundation :title="item.title" :context="item.context" :imgSrc="'http://localhost:8889'+'/'+item.imgSrc+'.jpg'"></foundation>
            </router-link>   
     </div>
    


    </div>
 
  


</template>

<script>
import userNav from "./userNav"
import swiperDemo from "../components/swiperDemo.vue"
import  foundation from "../components/foundation.vue"

export default{
    components:{
        userNav,
        swiperDemo,
        foundation
      
     
         
    },
    created()
{
     localStorage.setItem("states",true)
}  ,
      data(){
         return {
            dataArr:[
         
         ]
        
        }
         
      },
      created()
    {
      this.$axios.get(this.$host+"/movie").then(res=>{
            this.dataArr=res.data
            // console.log(res.data)
      })
    },
    computed:{
         searchs(){
             if(this.inputValue!=""){
               return this.dataArr.filter(value=>{
                   return value.title.indexOf(this.$store.state.movie.searchValue)!==-1 
               })
              

             }else{
               return this.dataArr
             }

              
          
            //  if(this.inputValue==""){
            //      return this.dataArr
            //  }
            // return this.dataArr.filter((value)=>{
            //      return value.title.indexOf(this.$store.state.movie)!==-1
                
            // }) 
         }
          
    }

     
 
     
}

</script>
<style scoped>
  a{
        text-decoration: none;
        color: blue;
    }
    
    .box{
      margin-left:30px;
      margin-top: 80px;
    }
    .banner{
       margin-top: 60px;
    }
    
    .content{
       display: flex;
       flex-wrap: wrap;
       justify-content: space-around;
       margin-top: 50px;
    
    }
    
    
    </style>